<template>
  <div class="pageBox">
    <head-component title="物流信息"></head-component>
    <div class="content">
      <div class="top flex-between">
        <img class="topLeft" src="../../image/home/banner.png" alt="" />
        <div class="topRight flex">
          <div class="topRightItem flex-between">
            <p>物流公司：申通快递</p>
          </div>
          <div class="topRightItem flex-between">
            <p>物流单号：267318289168688</p>
            <button>复制</button>
          </div>
          <div class="topRightItem flex-between">
            <p>物流电话：0539-88888</p>
          </div>
        </div>
      </div>

      <div class="tracking">
        <div class="trackingTitle">物流跟踪</div>
        <van-steps direction="vertical" :active="0" inactive-color="#E6E6E6" active-color="#F50811">
          <van-step>
            <h3>【城市】物流状态1</h3>
            <p>2016-07-12 12:40</p>
          </van-step>
          <van-step>
            <h3>【城市】物流状态2</h3>
            <p>2016-07-11 10:00</p>
          </van-step>
          <van-step>
            <h3>快件已发货</h3>
            <p>2016-07-10 09:30</p>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const active = ref(1);
    function goLogistics() {
      router.push({
        path: "/logistics",
      });
    }
    return {
      active,
      goLogistics,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    padding: 20px 30px;
    .top {
      height: 248px;
      background: #ffffff;
      border-radius: 20px;
      .topLeft {
        width: 168px;
        height: 168px;
        border-radius: 10px;
      }
      .topRight {
        width: 100%;
        height: 168px;
        padding-left: 20px;
        flex-direction: column;
        justify-content: space-between;
        .topRightItem {
          padding-right: 20px;
          p {
            font-size: 26px;
            font-weight: 400;
            color: #4d4d4d;
          }
          button {
            font-size: 26px;
            font-weight: 400;
            color: #e00b12;
            background-color: transparent;
            border: none;
          }
        }
      }
    }
    .tracking {
      margin-top: 20px;
      padding: 30px;
      background: #ffffff;
      .trackingTitle {
        font-size: 30px;
        font-weight: 500;
        color: #4d4d4d;
      }
    }
  }
}
</style>